@extends('front.public_layout.layout')


@section('style')
    <link rel="stylesheet" href="{{asset('/front/lib/muiplayer/mui-player/dist/mui-player.min.css')}}">
    <link rel="stylesheet" href="{{asset('/front/css/article.css')}}">
    <link rel="stylesheet" href="{{asset('/front/css/reservation.css')}}">
    <style>

    </style>


    <script src="{{asset('front/lib/image-preview/js/imagePreview.min.js')}}"></script>
    <script src="{{asset('front/lib/muiplayer/mui-player/dist/mui-player.min.js')}}"></script>
    <script src="{{asset('front/lib/muiplayer/mui-player-desktop-plugin/dist/mui-player-desktop-plugin.min.js')}}"></script>
@endsection

@section('content')
    <div class="middle-content">

        <div class="reservation-list">

            <div class="r-item">
                <div class="head-img">
                    <img src="{{ img_url($reservation->reserver->head_portrait) }}" alt="">
                </div>

                <div class="r-content">
                    <div class="follow-btn">关注</div>
                    <div class="author">{{ $reservation->reserver->real_name ? $reservation->reserver->real_name : $reservation->reserver->user_name }}</div>
                    <div class="publish-time">{{ $reservation->created_at }}</div>
                    <div class="title">
                        <span class="checked">#{{ $reservation->service_category->name }}</span>
                        @if ($reservation->region_info)
                            <span class="checked">【{{ $reservation->region_info->region_name }}】</span>
                        @endif
                        {{ $reservation->content }}
                    </div>

                    @if ($reservation->imgs_url)
                        <div class="img-list" id="c_imgs{{ $reservation->id }}">
                            @foreach($reservation->imgs_url as $imgsUrlVal)
                                <div><img src="{{ $imgsUrlVal }}" alt=""></div>
                            @endforeach
                        </div>
                        <script>
                            ImagePreview.init({id:$("#c_imgs"+'{{ $reservation->id }}'+" div img")});
                        </script>
                    @endif

                    @if ($reservation->video_url)
                        <div class="video-info">
                            <div id="mui-player{{ $reservation->id }}" class="video-div"></div>
                        </div>
                        <script>
                            var mp = new MuiPlayer({
                                container:'#mui-player'+'{{$reservation->id}}',
                                title:'',
                                src:'{{ $reservation->video_url }}',
                                poster:'{{ $reservation->video_img_url }}',
                                videoAttribute:[
                                    {attrKey:'webkit-playsinline',attrValue:''},
                                    {attrKey:'playsinline',attrValue:''},
                                    {attrKey:'x5-playsinline',attrValue:''},
                                    {attrKey:'t7-video-player-type',attrValue:'inline'},
                                    {attrKey:'x5-video-player-type',attrValue:'h5-page'},
                                    {attrKey:'x-webkit-airplay',attrValue:'allow'},
                                    {attrKey:'controlslist',attrValue:'nodownload'},
                                ],
                                plugins: [
                                    typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({}) : {},
                                ]
                            });
                        </script>
                    @endif

                    <div class="clear"></div>

                    <div class="r-opt">
                        <a class="share-num">{{ $reservation->share_num }}</a>
                        <a class="common-num">{{ $reservation->comment_num }}</a>
                        <a class="zan-num">{{ $reservation->zan_num }}</a>
                    </div>
                </div>
                @if ($commonList)
                    <div class="common-list">

                        @foreach($commonList as $commonVal)
                        <div class="common-item">
                            <div class="c-head-img">
                                <img src="{{ img_url($commonVal->commenter->head_portrait) }}" alt="">
                            </div>
                            <div class="common-cont">
                                <div class="c-text">
                                    @if ($commonVal->is_expert)
                                        <span class="expert-tip">专家</span>
                                    @endif
                                    <span class="checked">{{ $commonVal->commenter->real_name ? $commonVal->commenter->real_name : $commonVal->commenter->user_name }}</span>:
                                        @if ($commonVal->replyer)
                                    <span class="checked">@ {{ $commonVal->replyer->real_name ? $commonVal->replyer->real_name : $commonVal->replyer->user_name }}</span>
                                        @endif
                                    {{ $commonVal->content }}
                                </div>

                                @if ($commonVal->imgs_url)
                                    <div class="c-imgs" id="expert_common_imgs{{ $commonVal->id }}">
                                        @foreach($commonVal->imgs_url as $commonImgsUrlVal)
                                            <div><img src="{{ $commonImgsUrlVal }}" alt=""></div>
                                        @endforeach
                                    </div>
                                    <script>
                                        ImagePreview.init({id:$("#expert_common_imgs"+'{{ $commonVal->id }}'+" div img")});
                                    </script>
                                @endif

                                @if ($commonVal->video_url)
                                    <div class="c-video">
                                        <div id="common-mui-player{{ $commonVal->id }}" class="video-div"></div>
                                    </div>
                                    <script>
                                        var mp = new MuiPlayer({
                                            container:'#common-mui-player'+'{{$commonVal->id}}',
                                            title:'',
                                            src:'{{ $commonVal->video_url }}',
                                            poster:'{{ $commonVal->video_img_url }}',
                                            videoAttribute:[
                                                {attrKey:'webkit-playsinline',attrValue:''},
                                                {attrKey:'playsinline',attrValue:''},
                                                {attrKey:'x5-playsinline',attrValue:''},
                                                {attrKey:'t7-video-player-type',attrValue:'inline'},
                                                {attrKey:'x5-video-player-type',attrValue:'h5-page'},
                                                {attrKey:'x-webkit-airplay',attrValue:'allow'},
                                                {attrKey:'controlslist',attrValue:'nodownload'},
                                            ],
                                            plugins: [
                                                typeof MuiPlayerDesktopPlugin == 'function' ? new MuiPlayerDesktopPlugin({}) : {},
                                            ]
                                        });
                                    </script>
                                @endif

                                <div class="c-info">
                                    <span>{{ $commonVal->created_at }}</span>
                                    <span>{{ $commonVal->zan_num }}次赞</span>
                                </div>
                            </div>
                            {{--                        <div class="zan-btn"></div>--}}
                        </div>
                        @endforeach

                    </div>

                @endif

            </div>


        </div>

    </div>

@endsection


@section('js')

    <script>


    </script>
@endsection